<template>
  <div>
    <div class="dialog-button" @click="hidialog">点击打开 Dialog</div>
    <transition  name="slide-fade">
      <div v-if="visible">
        <div class="el-dialog_bg"></div>
        <div class="el-dialog">
          <div class="el-dialog_title">
            <span>{{title}}</span>
            <button  @click="hidialog"></button>
          </div>
          <div class="el-dialog_content">{{content}}</div>
          <div class="el-dialog_btns">
            <span @click="leftFn">{{left.text}}</span>
            <span @click="rightFn">{{right.text}}</span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>


<script>
/* eslint-disable quotes,vue/require-valid-default-prop */
export default {
  name: "el-dialog",
  methods: {
    hideDialog() {
      this.$emit('update:visible', false);
      return this;
    },
    hidialog() {
      // this.visible = true;
      this.$emit('update:visible', !this.visible);
    },
    leftFn() {
      this.hideDialog().left.cb();
    },
    rightFn() {
      this.hideDialog().right.cb();
    },
  },
  // props: ['title', 'content', 'left', 'right', 'visible'],
  props: {
    title: {
      type: String,
      required: true,
      default: '提示',
    },
    content: {
      type: String,
      required: true,
    },
    left: {
      type: Object,
      required: true,
      default: { text: '取 消' },
      validator: value => value.text && value.cb, //  自定义验证方法
    },
    right: {
      type: Object,
      required: true,
      default: { text: '确定' },
      validator: value => value.text && value.cb,

    },
    visible: {
      type: Boolean,
      required: true,
      default: true,
    },
  },
};
</script>


<style lang="scss" scoped>
  .dialog-button{
    text-align: center;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #409eff;
    cursor:pointer;
    &:hover{
      color: #409eff*1.2;
    }
  }
 .el-dialog{
   width: 30vw;
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   background: #fff;
   border-radius: 2px;
   text-align: center;
   overflow: hidden;
   el-dialog_bg{
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     overflow: auto;
     background-color: #000;
     opacity: 0.2;
     z-index: 99;
   }
   .el-dialog_title{
     padding:20px;
     padding-bottom: 10px;
     span{
       font-size: 18px;
       line-height: 24px;
       color:#303133;
     }
     button{
       position: absolute;
       width: 16px;
       height: 16px;
       top: 20px;
       right: 20px;
       padding: 0;
       background: transparent;
       border: none;
       outline: none;
       cursor: pointer;
       font-size: 16px;
       color: #909399;
       background: url("../../../img/cha.png");
       &:hover{
         background: url("../../../img/cuo2.png");
       }
     }
   }
   .el-dialog_content{
     text-align: initial;
     padding: 25px 25px 30px;
     color: #606266;
     font-size: 14px;
   }
   .el-dialog_btns{
     font-size: 0;
     padding: 20px;
     padding-top: 10px;
     text-align: inherit;
     span{
       display: inline-block;
       line-height: 1;
       cursor: pointer;
       background: #fff;
       border: 1px solid #dcdfe6;
       color: #606266;
       text-align: center;
       box-sizing: border-box;
       outline: none;
       margin: 0;
       transition: .1s;
       font-weight: 500;
       padding: 12px 20px;
       font-size: 14px;
       border-radius: 4px;
     }
     span:first-child{
       margin-right: 10px;
     }
     span:first-child:hover{
       color: #409eff;
       border-color: #c6e2ff;
       background-color: #ecf5ff;
     }
     span:last-child{
       margin-left: 10px;
       color: #fff;
       background-color: #409eff;
       border-color: #409eff;
     }
     span:last-child:hover{
       background: #66b1ff;
       border-color: #66b1ff;
       color: #fff;
     }
   }
 }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.5, 1.0);
  }
   .slide-fade-leave-to {
    opacity: 0;
  }
</style>
